<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>极简风格计算器</title>
    <style>
        :root {
            --primary: #6c5ce7;
            --secondary: #a8a5e6;
            --background: #f8f9ff;
        }

        /* 玻璃拟态容器‌:ml-citation{ref="2,3" data="citationList"} */
        .calculator {
            width: 340px;
            margin: 50px auto;
            padding: 25px;
            background: rgba(255,255,255,0.9);
            border-radius: 20px;
            backdrop-filter: blur(10px);
            box-shadow: 0 8px 32px rgba(31,38,135,0.15);
            border: 1px solid rgba(255,255,255,0.2);
        }

        /* 动态显示屏‌:ml-citation{ref="1,2" data="citationList"} */
        #display {
            width: calc(100% - 20px);
            height: 80px;
            margin: 10px 0 25px;
            padding: 15px;
            font-size: 2.5em;
            font-family: 'Segoe UI', sans-serif;
            text-align: right;
            border: none;
            background: linear-gradient(145deg, #ffffff, #f5f5ff);
            border-radius: 12px;
            box-shadow: inset 3px 3px 7px rgba(0,0,0,0.05);
            color: var(--primary);
        }

        /* 3D按钮设计‌:ml-citation{ref="3,6" data="citationList"} */
        .buttons {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 12px;
        }

        button {
            padding: 20px;
            border: none;
            border-radius: 15px;
            font-size: 1.4em;
            cursor: pointer;
            transition: all 0.2s;
            background: linear-gradient(145deg, #ffffff, #f5f5ff);
            box-shadow: 3px 3px 8px rgba(0,0,0,0.1),
                       -2px -2px 5px rgba(255,255,255,0.8);
            color: #5a5a5a;
        }

        /* 按钮交互反馈‌:ml-citation{ref="2,6" data="citationList"} */
        button:active {
            box-shadow: inset 2px 2px 5px rgba(0,0,0,0.1),
                      inset -2px -2px 5px rgba(255,255,255,0.7);
        }

        .operator {
            background: linear-gradient(145deg, var(--primary), #5d4fdb);
            color: white;
            box-shadow: 3px 3px 8px rgba(108,92,231,0.3);
        }

        #equals {
            background: linear-gradient(145deg, #ff6b6b, #ff5252);
            grid-row: span 2;
            color: #ffffff;
        }
    </style>
</head>
<body>
    <div class="calculator">
        <input type="text" id="display" disabled>
        <div class="buttons">
            <button class="operator" onclick="clearDisplay()">C</button>
            <button class="operator" onclick="appendToDisplay('/')">&divide;</button>
            <button class="operator" onclick="appendToDisplay('*')">&times;</button>
            <button class="operator" onclick="appendToDisplay('-')">−</button>
            
            <button onclick="appendToDisplay('7')">7</button>
            <button onclick="appendToDisplay('8')">8</button>
            <button onclick="appendToDisplay('9')">9</button>
            <button class="operator" onclick="appendToDisplay('+')">+</button>
            
            <button onclick="appendToDisplay('4')">4</button>
            <button onclick="appendToDisplay('5')">5</button>
            <button onclick="appendToDisplay('6')">6</button>
            <button onclick="appendToDisplay('.')">.</button>
            
            <button onclick="appendToDisplay('1')">1</button>
            <button onclick="appendToDisplay('2')">2</button>
            <button onclick="appendToDisplay('3')">3</button>
            <button id="equals" onclick="calculate()">=</button>
            
            <button onclick="appendToDisplay('0')" style="grid-column: span 2">0</button>
        </div>
    </div>
    <!-- 原JavaScript逻辑保持不变 -->
    <script>
      // 显示框操作‌:ml-citation{ref="1,2" data="citationList"}
      function appendToDisplay(value) {
          document.getElementById('display').value += value;
      }

      // 清空显示‌:ml-citation{ref="2,3" data="citationList"}
      function clearDisplay() {
          document.getElementById('display').value = '';
      }

      // 计算逻辑‌:ml-citation{ref="1,8" data="citationList"}
      function calculate() {
          try {
              const result = eval(document.getElementById('display').value);
              document.getElementById('display').value = result;
          } catch (error) {
              document.getElementById('display').value = "错误";
          }
      }
  </script>
</body>
</html>
